<template>
    <el-card style="height:900px;margin-top:5px">
        <span style="color: #4d62a5;font-size: 20px;font-weight:900;">权 限 定 义</span>
        <el-divider style="margin-top:5px;" />
        <el-row>
            <el-col :span="18"></el-col>
            <el-col :span="6">
                 <el-row :gutter="5">
                    <el-col :span="6">
                        <el-select v-model="value">
                                <el-option label="全部" value="all" />
                                <el-option label="有" value="true" />
                                <el-option label="无" value="false" />
                            </el-select>
                    </el-col>
                    <el-col :span="12">
                        <el-input
                            v-model="input"
                            class="w-50 m-2"
                            placeholder="请输入角色名称搜索"
                            :suffix-icon="Search"
                            />
                    </el-col>
                    <el-col :span="6">
                        <el-button  style="float: right;background-color: #8FAADC;color: white;" @click="addrole">新建角色</el-button>
                    </el-col>
                </el-row>
            </el-col>
        </el-row> 
        <el-table :data="tableData" style="width: 100%;margin-top: 20px;" border="true" :header-cell-style="{background:'#b4c7e7',color:'black',fontSize:'12px',fontWeight:'500'}">
            <el-table-column prop="role_name" label="角色名称"  align="center"/>
            <el-table-column prop="role_describe" label="角色描述" align="center"/>
            <el-table-column label="状态" align="center">
                <template #default="scope">
                    <el-switch v-model="scope.row.role_status" />
                </template>
            </el-table-column>
            <el-table-column prop="createtime" label="创建时间 " align="center"/>
            <el-table-column  label="操作" align="center">
                <template #default="scope">
                    <el-button type="text" class='btn' @click="handleEdit(scope.row)">编辑</el-button>
                    <el-button  type="text" style="color:green" class='btn' @click="handleDell(scope.row.id)">权限配置</el-button>
                    <el-button  type="text" style="color:orange" class='btn' @click="handleDell(scope.row.id)">删除</el-button>
                </template>
            </el-table-column>

        </el-table>  
    </el-card>
    <!-- 新建角色 -->
    <el-dialog
        v-model="dialogVisible"
        title="新 建 角 色"
        width="20%"
        top="320px"
        :before-close="handleClose"
        >
        <el-divider style="margin-top:-30px" />
        <el-form :model="addform">
            <el-form-item label="角色名称">
                <el-input v-model="addform.role_name" placeholder="请输入角色名称"></el-input>
            </el-form-item>
        </el-form>
        <el-form :model="addform">
            <el-form-item label="角色描述">
                <el-input v-model="addform.role_describe" type="textarea" placeholder="请输入角色名称"></el-input>
            </el-form-item>
        </el-form>
        <el-form :model="addform">
            <el-form-item label="状态">
                <el-switch style="margin-left:30px" v-model="addform.role_status" />
            </el-form-item>
        </el-form>
        <template #footer>
            <el-divider />
            <span class="dialog-footer">
                <el-button style="color:white;background-color: #CCCCCC;" @click="dialogVisible = false">取消</el-button>
                <el-button style="background-color: #8FAADC;color: white;" @click="dialogVisible = false"
                >保存</el-button
                >
            </span>
        </template>
    </el-dialog>
    <!-- 编辑角色 -->
     <el-dialog
        v-model="editVisible"
        title="编 辑 角 色"
        width="20%"
        top="320px"
        :before-close="handleClose"
        >
        <el-divider style="margin-top:-30px" />
        <el-form :model="editform">
            <el-form-item label="角色名称">
                <el-input v-model="editform.role_name" placeholder="请输入角色名称"></el-input>
            </el-form-item>
        </el-form>
        <el-form :model="addform">
            <el-form-item label="角色描述">
                <el-input v-model="editform.role_describe" type="textarea" placeholder="请输入角色名称"></el-input>
            </el-form-item>
        </el-form>
        <el-form :model="addform">
            <el-form-item label="状态">
                <el-switch style="margin-left:30px" v-model="editform.role_status" />
            </el-form-item>
        </el-form>
        <template #footer>
            <el-divider />
            <span class="dialog-footer">
                <el-button style="color:white;background-color: #CCCCCC;" @click="editVisible = false">取消</el-button>
                <el-button style="background-color: #8FAADC;color: white;" @click="editVisible = false"
                >保存</el-button
                >
            </span>
        </template>
    </el-dialog>
    <!-- 分配权限 -->
    <el-dialog
        v-model="authvisiable"
        title="权 限 配 置  设备管理员"
        width="20%"
        top="320px"
        :before-close="handleClose"
        >
        <el-divider style="margin-top:-30px" />
         <el-checkbox v-model="checkall" label="全选" size="large" />
         <el-tree :data="data" show-checkbox node-key="id" :props="{ class: customNodeClass }"></el-tree>
        <template #footer>
            <el-divider />
            <span class="dialog-footer">
                <el-button style="color:white;background-color: #CCCCCC;" @click="authvisiable = false">取消</el-button>
                <el-button style="background-color: #8FAADC;color: white;" @click="authvisiable = false"
                >保存</el-button
                >
            </span>
        </template>
    </el-dialog>
</template>

<script setup>
import { Search } from '@element-plus/icons-vue'
import { ref,reactive } from 'vue'
var value =ref('all')
var input =ref('')
var dialogVisible =ref(false)
var editVisible =ref(false)
var authvisiable = ref(false)
var checkall = ref(false)
var data = reactive([
    {
        id:1,
        label:'项目群',
        children:[
            {
                id:3,
                label:'项目排名',
                children:[
                    {
                        id:4,
                        label:'能源'
                    },
                    {
                        id:5,
                        label:'舒适'
                    },
                    {
                        id:4,
                        label:'经济表现'
                    },
                ]
            },
        ]
    },
    {},
])
var addform =reactive({
    role_name:'',
    role_describe:'',
    role_status:false
})
var editform =reactive({
    role_name:'',
    role_describe:'',
    role_status:false
})
var tableData =reactive([
    {
        role_name:'设备管理员',
        role_describe:'',
        role_status:true,
        createtime:'2022-01-01 12:00:00',
    },
     {
        role_name:'业主管理员',
        role_describe:'',
        role_status:true,
        createtime:'2022-01-01 12:00:00',
    },
     {
        role_name:'某某某',
        role_describe:'',
        role_status:false,
        createtime:'2022-01-01 12:00:00',
    },
])
function addrole(){
    dialogVisible.value = true
}
function handleEdit(e){
    // console.log(e.role_name)
    editform.role_name = e.role_name
    editform.role_describe = e.role_describe
    editform.role_status = e.role_status
    editVisible.value = true
}
function handleDell(){
    authvisiable.value = true
}
</script>

<style lang="less">

span.el-dialog__title {color: #4D62A5;}
.el-dialog__footer{
    margin-top:-60px
}
</style>
